<template>
  <el-tabs
    v-model:active-name="active"
    :type="type"
    :tab-position="tabPosition"
    :stretch="stretch"
    :closable="closable"
    :addable="addable"
    :editable="editable"
    :before-leave="beforeLeave"
    :lazy="lazy"
    @tab-click="handleTabClick"
    @tab-remove="handleTabRemove"
    @tab-add="handleTabAdd"
    @edit="handleEdit"
  >
    <el-tab-pane
      v-for="item in items"
      :key="item.value"
      :label="item.label"
      :name="item.value"
      :disabled="item.disabled"
      :closable="item.closable"
      :lazy="item.lazy"
    >
      <template #label>
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        {{ item.label }}
      </template>
      <slot :name="item.value"></slot>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { TabItem, TabsEvents, TabsOptions } from './types'
import { ElTabs, ElTabPane } from 'element-plus'

const props = withDefaults(defineProps<{
  modelValue?: string | number
  items: TabsOptions['items']
  type?: TabsOptions['type']
  tabPosition?: TabsOptions['tabPosition']
  stretch?: boolean
  closable?: boolean
  addable?: boolean
  editable?: boolean
  beforeLeave?: TabsOptions['beforeLeave']
  lazy?: boolean
}>(), {
  modelValue: '',
  type: 'line',
  tabPosition: 'top',
  stretch: false,
  closable: false,
  addable: false,
  editable: false,
  lazy: false
})
const emit = defineEmits<TabsEvents>()
const active = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
  active.value = val
})

watch(active, (val) => {
  emit('update:modelValue', val)
})

const handleTabClick = (tab: TabItem) => {
  emit('tab-click', tab)
}

const handleTabRemove = (tab: TabItem) => {
  emit('tab-remove', tab)
}

const handleTabAdd = () => {
  emit('tab-add')
}

const handleEdit = (tabName: string | number, action: 'remove' | 'add') => {
  emit('edit', tabName, action)
}
</script>

<style scoped>
.el-tabs {
  width: 100%;
}
</style> 